<script setup lang="ts">
  //Vue组件
  import { onMounted, ref } from "vue";
  import {
    NGrid,
    NStatistic,
    NGi,
    NDivider,
    NCard,
    NCarousel,
    NIcon,
  } from "naive-ui";
  // 引入图标
  import { ArrowBack, ArrowForward } from "@vicons/ionicons5";
  let screenWidth = document.body.clientWidth;
  const cardN = ref(screenWidth > 550 ? 2 : 1);
  const listN = ref(screenWidth > 450 ? 5 : 3);
  onMounted(() => {
    //小屏幕自适应
    screenWidth = document.body.clientWidth;
    cardN.value = screenWidth > 550 ? 2 : 1;
    listN.value = screenWidth > 450 ? 5 : 3;
    window.onresize = () => {
      screenWidth = document.body.clientWidth;
      cardN.value = screenWidth > 550 ? 2 : 1;
      listN.value = screenWidth > 450 ? 5 : 3;
    };
  });
  export default {
    name: "works",
    data() {
      return {};
    },
    methods: {
      onSubmit(values) {
        console.log("submit", values);
      },
    },
  };
</script>

<template>
  <div class="works">
    <div class="main">
      <div class="content">
        <div class="c_items">
          <img src="#" alt="" class="c_img" />
          <div class="c_right">
            <p>作品名称:????</p>
            <div class="c_r_bottom">
              <span>总分:99 </span>
              <span>创新度:77 </span>
              <span>体验人数:55 </span>
            </div>
          </div>
        </div>
        <div class="c_items">
          <img src="#" alt="" class="c_img" />
          <div class="c_right">
            <p>作品名称:????</p>
            <div class="c_r_bottom">
              <span>总分:99 </span>
              <span>创新度:77 </span>
              <span>体验人数:55 </span>
            </div>
          </div>
        </div>
        <div class="c_items">
          <img src="#" alt="" class="c_img" />
          <div class="c_right">
            <p>作品名称:????</p>
            <div class="c_r_bottom">
              <span>总分:99 </span>
              <span>创新度:77 </span>
              <span>体验人数:55 </span>
            </div>
          </div>
        </div>
      </div>
      <div class="more">翻页?最多显示3行</div>
    </div>
  </div>
</template>



<style lang="less" scoped>
.works {
  width: 7.5rem;
  margin: 0rem auto;
  padding-bottom: 1rem;
  .main {
    width: 6.8rem;
    margin: 0 auto;
    .content {
      padding-bottom: 1rem;
      .c_items {
        padding: 0.5rem 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 3px solid #449bb4;
        .c_img {
          width: 2rem;
          height: 1.5rem;
          background-color: orange;
          border-radius: 0.2rem;
        }
        .c_right {
          margin-left: 0.5rem;
        }
        .c_r_bottom {
          margin-top: 0.5rem;
        }
      }
    }
    .more {
      text-align: left;
    }
  }
}
</style>
